<template>
  <div class="bg-white rounded-sm shadow-lg m-10px p-20px text-15px">
    <div class="flex items-center justify-between text-gray-400">
      <div>{{ props.title }}</div>
      <InfoCircleOutlined />
    </div>
    <div class="text-30px my-10px">{{ props.value }}</div>
    <div class="flex items-end h-50px"><slot></slot></div>
    <div class="border-t mt-10px pt-5px"><slot name="footer"></slot></div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'WorkbenchCard',
  });
</script>

<script lang="ts" setup>
  import { InfoCircleOutlined } from '@ant-design/icons-vue';

  const props = defineProps<{
    title: String;
    value: String;
  }>();
</script>
